<template>
  <div id="detail">
    <detail-nav-bar class="detail-nav" ref="navBar" @titleClick="titleClick" />

    <scroll class="content" :probeType='3' ref="scroll" @scroll="cotentScroll">
      <detail-swiper :topImages="topImages" />

      <detail-base-info :good="good" />
      <detail-shop-info :shop="shop" />

      <detail-goods-info :detail-info="detailInfo" />
      <detail-param-info ref="param" :param-info="paramInfo" />

      <detail-comment-info ref="comment" :comment-info="commentInfo" />

      <goods-list ref="recommend" :goods="recommends" />
    </scroll>

    <back-top v-show="isShowBackTop" @click.native="back2Top" />
    <detail-bottom-bar @addToCart="add2Cart" />
  </div>
</template>
<script>
import {debounce} from "common/utils"
import {getDetail, Good, Shop, GoodParam, getRecommend} from 'network/detail'

import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailParamInfo from './childComps/DetailParamInfo'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailBottomBar from './childComps/DetailBottomBar'

import Scroll from 'components/common/scroll/Scroll'
import GoodsList from 'components/context/goods/GoodsList'

import {itemListenerMixin, backTopMixin} from 'common/mixin'

import {mapActions} from 'vuex'

export default {
  name: "Detail",
  data: () => ({
    iid: undefined,
    topImages: [],
    good: null,
    shop: null,
    detailInfo: null,
    paramInfo: null,
    commentInfo: null,
    recommends: [],
    themeTopYs: [0], // todo 加载界面获取
  }),
  components: {
    DetailNavBar, DetailSwiper, DetailBaseInfo, DetailShopInfo, Scroll, DetailGoodsInfo,
    DetailParamInfo, DetailCommentInfo, DetailBottomBar,
    GoodsList
  },
  mixins: [itemListenerMixin, backTopMixin],
  methods: {
    titleClick(index) {
      if (index >= this.themeTopYs.length) {
        return;
      }
      const scroll = this.$refs.scroll;
      const y = scroll.getScrollY();
      if (y > this.themeTopYs[index] || index < this.themeTopYs.length - 1 && y <= this.themeTopYs[index + 1]) {
        // 检查是否需要滚动
        scroll.scrollTo(0, this.themeTopYs[index]);
      }
    },
    cotentScroll(position) {
      const y = position.y;
      let index = 0;
      // 找到所在的板块, 最后一个值是-Infinity
      while (y <= this.themeTopYs[index + 1]) {
        index++;
      }
      if (index !== this.$refs.navBar.currentIndex) {
        this.$refs.navBar.currentIndex = index;
      }

      // 控制回到顶部按钮是否滚动
      this.isShowBackTop = y < -1000;
    },
    /**
     * 加入购物车
     */
    add2Cart() {
      // 1. 获取商品信息
      const product = {};
      product.image = this.topImages[0];
      product.title = this.good.title;
      product.desc = this.good.desc;
      product.price = this.good.realPrice;
      product.iid = this.iid;

      // 2. 将商品添加到购物车
      // this.$store.cartList.push(product); // 不推荐
      // this.$store.commit('add2Cart', product); // 将添加和自增操作分离 
      // this.$store.dispatch('add2Cart', product).then(res => {
      //   console.log(res);
      // });
      // 映射actions
      this.addCart(product).then(res => this.$toast.show(res));
    },
    ...mapActions({
      addCart: 'add2Cart'
    })
  },
  created() {
    this.iid = this.$route.params.id;

    // 请求详情数据
    getDetail(this.iid).then(res => {
      const data = res.result;

      // 1. 获取顶部的图片轮播图数据
      this.topImages = data.itemInfo.topImages;

      // 2. 获取商品信息
      this.good = new Good(data.itemInfo, data.columns, data.shopInfo.services);

      // 3. 创建店铺信息的对象
      this.shop = new Shop(data.shopInfo);

      // 4. 保存商品的详情数据
      this.detailInfo = data.detailInfo;

      // 5. 获取参数的信息
      this.paramInfo = new GoodParam(data.itemParams.info, data.itemParams.rule);

      // 6. 获取评论信息
      if (data.rate.cRate > 0) {
        // 取出第一条评论信息
        this.commentInfo = data.rate.list[0];
      }
    // 无法保证图片加载完成之后执行, offsetTop值不正确
    // }).then(res => {
    //   this.$nextTick(() => {
    //     this.themeTopYs.push(-this.$refs.param.$el.offsetTop);
    //     this.themeTopYs.push(-this.$refs.comment.$el.offsetTop);
    //     this.themeTopYs.push(-this.$refs.recommend.$el.offsetTop);

    //     console.log(this.themeTopYs);
    //   });
    });

    // 请求推荐数据
    getRecommend().then(res => {
      const data = res.data;
      
      this.recommends = data.list;
    });

    // 注册图片加载完成事件
    this.$bus.$on('detail-goods-item-image-load', debounce(() => {
        this.themeTopYs.push(-this.$refs.param.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.comment.$el.offsetTop);
        this.themeTopYs.push(-this.$refs.recommend.$el.offsetTop);

        this.themeTopYs.push(-Infinity);
    }, 1000 - Math.floor(Math.random() * 500)));
  }
}
</script>
<style scoped>
#detail {
  position: relative;
  z-index: 1;
  background-color: #fff;
  height: 100vh;
}

.detail-nav {
  position: relative;
  z-index: 9;
  background-color: #fff;
}

.content {
  background-color: #fff;
  height: calc(100% - 44px - 49px);
  /* position: fixed; */
  /* top: 44px; */
  /* bottom: 56px; */
}
</style>
